<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>Laydate</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
</head>
<style>
    .layui-inline {
        margin-right: 15px;
    }
</style>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main" style="margin-top: 20px">

            <blockquote class="layui-elem-quote layui-text">
                用户可根据自己需要选择用不同的日期模块，当选中一款模块时，不要忘记调用他的方法哦
            </blockquote>

            日期时间范围选择：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test1">
            </div>

            <br><br>
            <hr>
            <br>

            日期选择器：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test2">
            </div>

            <br><br>
            <hr>
            <br>

            年选择器：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test3">
            </div>

            年月选择器：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test4">
            </div>

            时间时间器：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test5">
            </div>

            <br><br>
            <hr>
            <br>

            时间范围选择
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test55">
            </div>

            自定义重要日：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test555">
            </div>

            <br><br>
            <hr>
            <br>


            同时绑定多个：
            <div class="layui-inline">
                <input type="text" class="layui-input test-item">
            </div>
            <div class="layui-inline">
                <input type="text" class="layui-input test-item">
            </div>
            <div class="layui-inline">
                <input type="text" class="layui-input test-item">
            </div>

            <br><br>
            <hr>
            <br>


            墨绿主题：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test6-1">
            </div>

            自定义头部背景色：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test6-2">
            </div>

            格子主题：
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test6-3">
            </div>

            <br><br>
            <hr>
            <br>

            <button class="layui-btn" id="test7">其它元素触发</button>
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test6">
            </div>

            <button class="layui-btn" id="test9">外部事件触发</button>
            <div class="layui-inline">
                <input type="text" class="layui-input" id="test8">
            </div>

            <br><br>
            <hr>
            <br>
            直接嵌套在指定容器中：<br><br>
            <div class="layui-inline" id="test10"></div>
            <div class="layui-inline" id="test11" style="margin-left: 30px;"></div>
        </div>
    </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
  layui.use('laydate', function () {
    var laydate = layui.laydate;

    //双控件
    //elem: 必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
    //type: 控件选择类型 其类型主要有
    // year(年选择器) 只提供年列表选择
    // month(年月选择器) 只提供年、月选择
    // date(日期选择器) 可选择：年、月、日。type默认值，一般可不填
    // time(时间选择器) 只提供时、分、秒选择
    // datetime(日期时间选择器) 可选择：年、月、日、时、分、秒
    //range: 开启左右面板范围选择 默认值 false
    // 如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
    //format: 'yyyy-MM-dd HH:mm:ss' //可任意组合 2017-12-27 16:08:08
    //position - 定位方式  abolute(绝对定位)/fixed（固定定位）/static（静态定位）
    //showBottom - 是否显示底部栏 默认true 如果设置 false，将不会显示控件的底部栏区域
    //btns - 工具按钮 默认值['clear', 'now', 'confirm']
    //lang - 语言 默认值：cn  我们内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。这里并没有开放自定义文字，是为了避免繁琐的配置。
    //theme - 主题 默认值：default theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题
    //calendar - 是否显示公历节日 默认值：false 我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。
    //mark - 标注重要日子 默认值：无
    //控件初始打开的回调   控件在打开时触发，回调返回一个参数：初始的日期时间对象
            //laydate.render({
                //elem: '#test'
                //,ready: function(date){
                // console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                //}
            //});
    //日期时间被切换后的回调  年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
            //    laydate.render({
            //      elem: '#test'
            //      ,change: function(value, date, endDate){
            //        console.log(value); //得到日期生成的值，如：2017-08-18
            //        console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            //        console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            //      }
            //    });

    //控件选择完毕后的回调 点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
            //    laydate.render({
            //      elem: '#test'
            //      ,done: function(value, date, endDate){
            //        console.log(value); //得到日期生成的值，如：2017-08-18
            //        console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            //        console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            //      }
            //    });


    var ins1 = laydate.render({
      elem: '#test1' //指定元素
      , type: 'datetime'
      , trigger: 'click'
      , lang: 'en'
      , range: true //开启日期范围，默认使用“_”分割
      , done: function (value, date, endDate) {
        console.log('done:', 'value is', value, 'data is', date, 'endDate is', endDate);
      }
      ,change: function(value, date, endDate){
        ins1.hint(value); //在控件上弹出value值  注意ins1是要先定义哦
        console.log('change:','value is',value,'data is', date, 'endDate is',endDate);
      }
    });

    //单控件
    laydate.render({
      elem: '#test2'
      //,format: 'yyyy年MM月dd日'
      //,value: new Date(1989,9,14)
      , format: 'yyyyMMdd'
      , value: '20170910'
      //,max: 0
      //,min: '2016-10-14'
      //,max: -1
      //,value: '1989年10月14日'
      , ready: function (date) {
        console.log(date);
      }
      , done: function (value, date, endDate) {
        console.log(value, date, endDate);
      }
    });

    //年选择器
    laydate.render({
      elem: '#test3'
      , type: 'year'
      //,range: true
      //,trigger: 'click'
      , done: function (value, date, endDate) {
        console.log(value, date, endDate);
      }
      , change: function (value, date, endDate) {
        //this.elem.val(value)
      }
    });

    //年月选择器
    laydate.render({
      elem: '#test4'
      , type: 'month'
      , range: true
      //,trigger: 'click'
      , max: -30
      , done: function (value, date, endDate) {
        console.log(value, date, endDate);
      }
      , change: function (value, date, endDate) {
        this.elem.val(value)
      }
    });

    //时间选择器
    laydate.render({
      elem: '#test5'
      , type: 'time'
      //,range: true
      //,trigger: 'click'
      , min: '09:30:00'
      , max: '17:30:00'
      , done: function (value, date, endDate) {
        console.log(value, date, endDate);
      }
      , change: function (value, date, endDate) {
        //this.elem.val(value)
      }
    });

    //时间范围选择器
    laydate.render({
      elem: '#test55'
      , type: 'time'
      , range: true
      //,trigger: 'click'
      , done: function (value, date, endDate) {
        console.log(value, date, endDate);
      }
    });

    //同时绑定多个
    lay('.test-item').each(function () {
      laydate.render({
        elem: this
        , trigger: 'click'
      });
    });

    //自定义重要日
    var ins555 = laydate.render({
      elem: '#test555'
      //,calendar: true //是否开启公历重要节日
      , mark: { //标记重要日子
        '0-8-15': '纪念' //0代表：每年
        , '0-0-15': '中旬'
        , '2017-8-20': '发布'
        , '2017-8-31': '月底'
      }
      , done: function (value, date, endDate) {
        if (date.year == 2017 && date.month == 8 && date.date == 15) {
          //console.log('中国人民战胜日本法西斯纪念日');
        }
      }
      , change: function (value, date, endDate) {
        console.log(value)
      }
    });

    //墨绿主题
    laydate.render({
      elem: '#test6-1' //指定元素
      , type: 'datetime'
      , theme: 'molv'
      //,range: true
      , trigger: 'click'
    });

    //自定义背景色主题
    laydate.render({
      elem: '#test6-2' //指定元素
      , type: 'datetime'
      , theme: '#393D49'
      //,range: true
      , trigger: 'click'
    });

    //格子主题
    laydate.render({
      elem: '#test6-3' //指定元素
      //,type: 'datetime'
      , theme: 'grid'
      //,range: true
      , trigger: 'click'
    });

    //其它元素触发
    laydate.render({
      elem: '#test6' //指定元素
      , eventElem: '#test7' //绑定执行事件的元素
      , lang: 'en'
    });

    //外部事件
    lay('#test9').on('click', function (e) {
      laydate.render({
        elem: '#test8'
        , type: 'datetime'
        , show: true
        //,min: '2017-08-12 00:10:00'
        //,max: '2017-08-12 23:10:10'
        , closeStop: '#test9' //点击 #test6 所在元素区域不关闭控件
        , change: function (value, date) {
          console.log(value, date)
        }
        , done: function (value, date) {
          console.log(value, date)
        }
      });
    });

    //直接嵌套在指定容器中
    var ins10 = laydate.render({
      elem: '#test10'
      , position: 'static'
      , calendar: true //是否开启公历重要节日
      , mark: { //标记重要日子
        '2017-8-20': ''
        , '2017-8-21': ''
      }
      , done: function (value, date, endDate) {
        if (date.year == 2017 && date.month == 8 && date.date == 20) {
          ins10.hint('XX活动日');
        }
      }
      , change: function (value, date, endDate) {
        console.log(value)
      }
    });

    laydate.render({
      elem: '#test11'
      , position: 'static'
      , lang: 'en'
      , type: 'datetime'
      , calendar: true //是否开启公历重要节日
      , done: function (value, date, endDate) {
        //console.log(value, date, endDate);
      }
      , change: function (value, date, endDate) {
        console.log(value)
      }
    });
  });
</script>
</body>
</html>